@charset "utf-8";

/* CSS Document */


/*==================================================
    * @name CSS 组件UI
    * @author 莫胜利/lisfan Cell：18072152020/WeChat：448182355
    * @version - v1.0#2016-01-27
==================================================*/

.fl {
	float: left;
}

.fr {
	float: right;
}

.clear {
	_zoom: 1;
}

.clear:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: ".";
}

.clearfix {
	_zoom: 1;
}

.clearfix:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: ".";
}


/* 悬浮固定 */

.com-fixer {
	position: fixed!important;
	z-index: 19890129!important;
}


/* 通用导航 */

.com-switcher {
	.node {
		&.active,
		&:hover {
			a {}
		}
		a {}
	}
}


/* 条件过滤 */

.com-enabler {
	.node {
		&.active,
		&:hover {
			a {}
		}
		a {}
	}
}


/* 下拉组件 */

.com-droplist {
	position: relative;
	z-index: 1000;
	&.active {}
	.com-trigger {
		position: relative;
		z-index: 100;
		cursor: pointer;
		background-color: #fff;
		&.active,
		&:hover {}
	}
	.com-target {
		position: absolute;
		z-index: 90;
		height: initial;
		border: 1px solid #e0e0e0;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		background-color: #fff;
		white-space: nowrap;
		display: none;
		&.active {}
		.node {
			&.active,
			&:hover {}
		}
	}
	.ui-rotate-arrow {
		content: "";
		position: absolute;
		left: 100%;
		top: 50%;
		z-index: 100;
		margin-top: -3px;
		margin-left: 2px;
		width: 0px;
		border: 4px solid rgba(0, 0, 0, 0);
		border-top-color: #777;
		font-size: 0px;
		line-height: 0;
		cursor: pointer;
	}
	.ui-flip-arrow {
		position: absolute;
		left: 100%;
		top: 0px;
		z-index: 100;
		margin-top: -3px;
		&:after {
			content: "";
			display: inline-block;
			width: 4px;
			height: 4px;
			border: 1px solid rgba(0, 0, 0, 0);
			border-bottom-color: #777;
			border-right-color: #777;
			background-color: rgba(0, 0, 0, 0);
			font-size: 0px;
			line-height: 0;
			cursor: pointer;
			transform-origin: 50% 50%;
			transform: rotate(45deg);
			display: none\9;
		}
	}
}


/* 动画效果 */

.animated {
	-webkit-animation-duration: .5s;
	-moz-animation-duration: .5s;
	-o-animation-duration: .5s;
	-ms-animation-duration: .5s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
}

.animated.slow {
	-webkit-animation-duration: .2s;
	-moz-animation-duration: .2s;
	-o-animation-duration: .2s;
	-ms-animation-duration: .2s;
	animation-duration: 2s;
}

.animated.slowly {
	-webkit-animation-duration: 5s;
	-moz-animation-duration: 5s;
	-o-animation-duration: 5s;
	-ms-animation-duration: 5s;
	animation-duration: 5s;
}

.animated.fast {
	-webkit-animation-duration: .5s;
	-moz-animation-duration: .5s;
	-o-animation-duration: .5s;
	-ms-animation-duration: .5s;
	animation-duration: .5s;
}

.animated.faster {
	-webkit-animation-duration: .3s;
	-moz-animation-duration: .3s;
	-o-animation-duration: .3s;
	-ms-animation-duration: .3s;
	animation-duration: .3s;
}

.animated.fastest {
	-webkit-animation-duration: .2s;
	-moz-animation-duration: .2s;
	-o-animation-duration: .2s;
	-ms-animation-duration: .2s;
	animation-duration: .2s;
}

.animated.linear {
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	animation-timing-function: linear;
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.animated.alternate {
	-webkit-animation-direction: alternate;
	-moz-animation-direction: alternate;
	-o-animation-direction: alternate;
	-ms-animation-direction: alternate;
	animation-direction: alternate;
}

@-webkit-keyframes fadeInDownMini {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInDownMini {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

.animated.fadeInDownMini {
	-webkit-animation-name: fadeInDownMini;
	animation-name: fadeInDownMini;
}

@-webkit-keyframes fadeOutUpMini {
	from {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}
}

@keyframes fadeOutUpMini {
	from {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}
}

.animated.fadeOutUpMini {
	-webkit-animation-name: fadeOutUpMini;
	animation-name: fadeOutUpMini;
}

@-webkit-keyframes fadeInRightMini {
	from {
		opacity: 0;
		-webkit-transform: translate3d(15px, 0px, 0);
		transform: translate3d(15px, 0px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0px, 0px, 0);
		transform: translate3d(0px, 0px, 0);
	}
}

@keyframes fadeInRightMini {
	from {
		opacity: 0;
		-webkit-transform: translate3d(15px, 0px, 0);
		transform: translate3d(15px, 0px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0px, 0px, 0);
		transform: translate3d(0px, 0px, 0);
	}
}

.animated.fadeInRightMini {
	-webkit-animation-name: fadeInRightMini;
	animation-name: fadeInRightMini;
}

@-webkit-keyframes fadeOutLeftMini {
	from {
		opacity: 1;
		-webkit-transform: translate3d(0px, 0px, 0);
		transform: translate3d(0px, 0px, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(-15px, 0px, 0);
		transform: translate3d(-15px, 0px, 0);
	}
}

@keyframes fadeOutLeftMini {
	from {
		opacity: 1;
		-webkit-transform: translate3d(0px, 0px, 0);
		transform: translate3d(0px, 0px, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(-15px, 0px, 0);
		transform: translate3d(-15px, 0px, 0);
	}
}

.animated.fadeOutLeftMini {
	-webkit-animation-name: fadeOutLeftMini;
	animation-name: fadeOutLeftMini;
}

@-webkit-keyframes zoomInMini {
	from {
		opacity: 0;
		-webkit-transform-origin: 0 41px;
		transform-origin: 0 41px;
		-webkit-transform: scale(1, 0.8);
		transform: scale(1, 0.8);
	}
	to {
		opacity: 1;
		-webkit-transform-origin: 0 41px;
		transform-origin: 0 41px;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}

@keyframes zoomInMini {
	from {
		opacity: 0;
		-webkit-transform-origin: 0 41px;
		transform-origin: 0 41px;
		-webkit-transform: scale(1, 0.8);
		transform: scale(1, 0.8);
	}
	to {
		opacity: 1;
		-webkit-transform-origin: 0 41px;
		transform-origin: 0 41px;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}

.animated.zoomInMini {
	-webkit-animation-name: zoomInMini;
	animation-name: zoomInMini;
}

@-webkit-keyframes zoomOutMini {
	from {
		opacity: 1;
		-webkit-transform-origin: 0 41px;
		transform-origin: 0 41px;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	to {
		opacity: 0;
		-webkit-transform-origin: 0 41px;
		transform-origin: 0 41px;
		-webkit-transform: scale(1, 0.8);
		transform: scale(1, 0.8);
	}
}

@keyframes zoomOutMini {
	from {
		opacity: 1;
		-webkit-transform-origin: 0 41px;
		transform-origin: 0 41px;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	to {
		opacity: 0;
		-webkit-transform-origin: 0 41px;
		transform-origin: 0 41px;
		-webkit-transform: scale(1, 0.8);
		transform: scale(1, 0.8);
	}
}

.animated.zoomOutMini {
	-webkit-animation-name: zoomOutMini;
	animation-name: zoomOutMini;
}

@-webkit-keyframes zoomInDownBig {
	from {
		opacity: 0;
		transform-origin: 0px 0px;
		-webkit-transform: scale(1, 0);
		transform: scale(1, 0);
	}
	to {
		opacity: 1;
		transform-origin: 0px 0px;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}

@keyframes zoomInDownBig {
	from {
		opacity: 0;
		transform-origin: 0px 0px;
		-webkit-transform: scale(1, 0);
		transform: scale(1, 0);
	}
	to {
		opacity: 1;
		transform-origin: 0px 0px;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}

.animated.zoomInDownBig {
	-webkit-animation-name: zoomInDownBig;
	animation-name: zoomInDownBig;
}

@-webkit-keyframes zoomOutUpBig {
	from {
		opacity: 1;
		transform-origin: 0px 0px;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	to {
		opacity: 0;
		transform-origin: 0px 0px;
		-webkit-transform: scale(1, 0);
		transform: scale(1, 0);
	}
}

@keyframes zoomOutUpBig {
	from {
		opacity: 1;
		transform-origin: 0px 0px;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	to {
		opacity: 0;
		transform-origin: 0px 0px;
		-webkit-transform: scale(1, 0);
		transform: scale(1, 0);
	}
}

.animated.zoomOutUpBig {
	-webkit-animation-name: zoomOutUpBig;
	animation-name: zoomOutUpBig;
}


/* 过渡效果 */

.transient {
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
	&:before {
		-webkit-transition-duration: 1s;
		-moz-transition-duration: 1s;
		-o-transition-duration: 1s;
		-ms-transition-duration: 1s;
		transition-duration: 1s;
	}
	&:after {
		-webkit-transition-duration: 1s;
		-moz-transition-duration: 1s;
		-o-transition-duration: 1s;
		-ms-transition-duration: 1s;
		transition-duration: 1s;
	}
}

.transient.slow {
	-webkit-transition-duration: 2s;
	-moz-transition-duration: 2s;
	-o-transition-duration: 2s;
	-ms-transition-duration: 2s;
	transition-duration: 2s;
	&:before {
		-webkit-transition-duration: 2s;
		-moz-transition-duration: 2s;
		-o-transition-duration: 2s;
		-ms-transition-duration: 2s;
		transition-duration: 2s;
	}
	&:after {
		-webkit-transition-duration: 2s;
		-moz-transition-duration: 2s;
		-o-transition-duration: 2s;
		-ms-transition-duration: 2s;
		transition-duration: 2s;
	}
}

.transient.slowly {
	-webkit-transition-duration: 5s;
	-moz-transition-duration: 5s;
	-o-transition-duration: 5s;
	-ms-transition-duration: 5s;
	transition-duration: 5s;
	&:before {
		-webkit-transition-duration: 5s;
		-moz-transition-duration: 5s;
		-o-transition-duration: 5s;
		-ms-transition-duration: 5s;
		transition-duration: 5s;
	}
	&:after {
		-webkit-transition-duration: 5s;
		-moz-transition-duration: 5s;
		-o-transition-duration: 5s;
		-ms-transition-duration: 5s;
		transition-duration: 5s;
	}
}

.transient.fast {
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
	&:before {
		-webkit-transition-duration: .5s;
		-moz-transition-duration: .5s;
		-o-transition-duration: .5s;
		-ms-transition-duration: .5s;
		transition-duration: .5s;
	}
	&:after {
		-webkit-transition-duration: .5s;
		-moz-transition-duration: .5s;
		-o-transition-duration: .5s;
		-ms-transition-duration: .5s;
		transition-duration: .5s;
	}
}

.transient.faster {
	-webkit-transition-duration: .3s;
	-moz-transition-duration: .3s;
	-o-transition-duration: .3s;
	-ms-transition-duration: .3s;
	transition-duration: .3s;
	&:before {
		-webkit-transition-duration: .3s;
		-moz-transition-duration: .3s;
		-o-transition-duration: .3s;
		-ms-transition-duration: .3s;
		transition-duration: .3s;
	}
	&:after {
		-webkit-transition-duration: .3s;
		-moz-transition-duration: .3s;
		-o-transition-duration: .3s;
		-ms-transition-duration: .3s;
		transition-duration: .3s;
	}
}

.transient.fastest {
	-webkit-transition-duration: .2s;
	-moz-transition-duration: .2s;
	-o-transition-duration: .2s;
	-ms-transition-duration: .2s;
	transition-duration: .2s;
	&:before {
		-webkit-transition-duration: .2s;
		-moz-transition-duration: .2s;
		-o-transition-duration: .2s;
		-ms-transition-duration: .2s;
		transition-duration: .2s;
	}
	&:after {
		-webkit-transition-duration: .2s;
		-moz-transition-duration: .2s;
		-o-transition-duration: .2s;
		-ms-transition-duration: .2s;
		transition-duration: .2s;
	}
}

.transient.linear {
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-o-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
	transition-timing-function: linear;
}

.rotateDown {
	-webkit-transform-origin: 50% 25%;
	-moz-transform-origin: 50% 25%;
	-o-transform-origin: 50% 25%;
	-ms-transform-origin: 50% 25%;
	transform-origin: 50% 25%;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	&.active {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}

.flipDown {
	-webkit-transform-origin: 50% 70%;
	-moz-transform-origin: 50% 70%;
	-o-transform-origin: 50% 70%;
	-ms-transform-origin: 50% 70%;
	transform-origin: 50% 70%;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
	&.active {
		-webkit-transform: rotateX(180deg);
		-moz-transform: rotateX(180deg);
		-o-transform: rotateX(180deg);
		-ms-transform: rotateX(180deg);
		transform: rotateX(180deg);
	}
}

.fadeInDown {
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 0;
	&.active {
		-webkit-transform: translateY(4px);
		-moz-transform: translateY(4px);
		-o-transform: translateY(4px);
		-ms-transform: translateY(4px);
		transform: translateY(4px);
		opacity: 1;
	}
}

.slideLeft {
	-webkit-transform: translateX(10px);
	-moz-transform: translateX(10px);
	-o-transform: translateX(10px);
	-ms-transform: translateX(10px);
	transform: translateX(10px);
	opacity: 0;
	&.active {
		-webkit-transform: translateX(0px);
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		-ms-transform: translateX(0px);
		transform: translateX(0px);
		opacity: 1;
	}
}